import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Table, Space, Button, Input, Image, Popconfirm, Typography, Select, Tabs } from 'antd';
import { SyncOutlined } from '@ant-design/icons';
import { connect } from 'umi';
import moment from 'moment';
import UploadUtil from '@/components/UploadUtil';
import IconFont from '@/components/Iconfont';
import { GetFileExt } from '@/services/crud';
import ImgQuick from './imgQuick';

const currControl = "Attachment";
const { Search } = Input;
const { Text } = Typography;
class ViewPage extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            loading: false,
            dataSource: [],
            visible: false,
            selectedRowKeys: [],
            pageIndex: 1,
            pageSize: 10,
            totalCount: 0,
            payload: {},
            record: {},
            keywords: '',
            fileExt: [],
            ext: null,
            isList: true
        }
    }
    componentDidMount() {
        this.fetchDatas();
        this.fetchFileExt();
    }
    fetchFileExt = async () => {
        const resp = await GetFileExt();
        this.setState({ fileExt: resp?.result });
    }
    fetchDatas = () => {
        this.setState({ loading: true });
        const { pageIndex, pageSize, keywords, ext } = this.state;
        this.props.dispatch({
            type: "Abp/getList",
            payload: { SkipCount: (pageIndex - 1) * pageSize, MaxResultCount: pageSize, keywords, ext },
            control: currControl
        }).then(() => {
            var resp = this.props.response;
            if (resp && resp.result) {
                var dataSource = resp.result.items;
                this.setState({ loading: false, dataSource, totalCount: resp.result.totalCount });
            }
        });
    }
    handleDelete = (id: number) => {
        this.props.dispatch({
            type: "Abp/delete",
            payload: { id },
            control: currControl
        }).then(() => {
            this.fetchDatas();
        });
    }
    onSelectChange = (selectedRowKeys: any) => {
        this.setState({ selectedRowKeys });
    };
    onSearch = (keywords: any) => {
        this.setState({ keywords }, () => {
            this.fetchDatas();
        });
    }
    clickFun = (val: any) => {
        this.setState({ keywords: val });
    }
    doRefresh = () => {
        let _this = this;
        this.setState({ ext: null }, function () {
            _this.fetchDatas();
        })
    }
    render() {
        const { loading, dataSource, selectedRowKeys, totalCount, pageSize, fileExt, keywords } = this.state;
        const imgexe = ['.jpg', '.jpeg', '.png', '.bmp', '.gif'];
        const columns = [
            {
                title: '文件',
                width: 60,
                dataIndex: 'sysRowID',
                render: (text: string, record: any) => (
                    imgexe.includes(record.fileExtension) ? <Image alt={text} width={30} height={24} src={UploadUtil.imgServ + text} /> : <IconFont style={{ fontSize: '30px' }} type={"icon-" + record.fileExtension.replace('.', '')} />
                )
            },
            {
                title: '文件类型',
                dataIndex: 'fileExtension',
            },
            {
                title: '文件大小',
                dataIndex: 'fileSize',
                render: (text: string) => (
                    <span>{text} <Text type="secondary">kb</Text></span>
                )
            },
            {
                title: '上传时间',
                dataIndex: 'creationTime',
                render: (text: string) => (
                    <span><Text type="secondary">{moment(text).format('YYYY-MM-DD hh:mm:ss')}</Text></span>
                )
            },
            {
                title: '文件名',
                dataIndex: 'fileName',
            },
            {
                title: '操作',
                render: (record: any) =>
                    dataSource.length >= 1 ? (
                        <span>
                            <Popconfirm title="确定删除?" onConfirm={() => this.handleDelete(record.id)}>
                                <a>删除</a>
                            </Popconfirm>
                        </span>
                    ) : null,
            },
        ];
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };
        return (
            <PageHeaderWrapper>
                <Tabs type="card">
                    <Tabs.TabPane tab="列表" key="1">
                        <Card>
                            <Space>
                                <Button type="primary"
                                    onClick={this.doRefresh}
                                    loading={loading}
                                    icon={<SyncOutlined />} >刷新</Button>
                                <Select style={{ width: 100 }} placeholder="文件格式" onChange={value => this.setState({ ext: value })}>
                                    {
                                        fileExt ? fileExt.map((item: any) => {
                                            return (
                                                <Select.Option
                                                    key={item}
                                                    value={item}>{item}
                                                </Select.Option>
                                            )
                                        }) : null
                                    }
                                </Select>
                                <Search style={{ width: 240 }} value={keywords} placeholder="输入关键词搜索" onSearch={value => this.onSearch(value)} />
                            </Space>

                        </Card>
                        <Table
                            rowKey="id"
                            loading={loading}
                            rowSelection={rowSelection}
                            columns={columns}
                            dataSource={dataSource}
                            pagination={{
                                onChange: page => {
                                    this.setState({ pageIndex: page }, () => {
                                        this.fetchDatas();
                                    });
                                },
                                pageSize,
                                total: totalCount,
                            }} />
                    </Tabs.TabPane>
                    <Tabs.TabPane tab="缩略图" key="2">
                        <ImgQuick gutter={16} column={8} />
                    </Tabs.TabPane>
                </Tabs>
            </PageHeaderWrapper>
        )
    }
}
export default connect(({ Abp }: API.IConnectState) => ({
    response: Abp.response,
    currentUser: Abp.currentUser,
}))(ViewPage);